<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        let div = document.querySelectorAll('div');
        div[0].onclick = function(){
            alert('0');
            //传统删除事件方式
            div[0].onclick = null
        }
        //监听事件绑定
        div[1].addEventListener('click',fn)//里面的fn调用不需要加小括号就可以直接调用
        function fn(){
            alert(22);
            //移除监听事件
            div[1].removeEventListener('click',fn)
        }
        //3这种方式有兼容性
        div[2].attachEvent('onclick',fn1);
        function fn1(){
            alert(33);
            div[2].detachEvent('onclick',fn1)
        }
    </script>
</body>
</html>